import { useSelector } from "react-redux";
import {
  List,
  FlexboxGrid,
  IconButton,
} from 'rsuite'
import { del, todosSelector } from "./todosSlice";
import {Minus} from '@rsuite/icons';
import { useDispatch } from "react-redux";

export default function Todos() {
  const dispatch = useDispatch()
  const todos = useSelector(todosSelector)
  return (
    <List bordered>
      {todos.map((todo, index) => (
        <List.Item key={todo.id}>
          <FlexboxGrid>
            <FlexboxGrid.Item colspan={4}>

            </FlexboxGrid.Item>
            <FlexboxGrid.Item colspan={16}>
            {todo.text}
            </FlexboxGrid.Item>
            <FlexboxGrid.Item colspan={4}>
              <IconButton icon={<Minus style={{fontSize:'10px'}}/>}
                circle
                appearance={'primary'}
                color='red'
                size='xs'
                onClick={() => dispatch(del(index))}
                />
            </FlexboxGrid.Item>
          </FlexboxGrid>
        </List.Item>
      ))}
    </List>
  )
}